<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>侧边栏的展示(Display of sidebar)</title>
  <style>
    .tool-bar, .tool-bar-delegate {
      position: fixed;
      top: 10%;
      right: 0;

      width: 35px;

      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tool-bar-delegate {
      top: 230px;
    }

    .tool-bar .item, .tool-bar-delegate .item {
      position: relative;
      margin-bottom: 1px;
      width: 35px;
      height: 35px;

      background-color: #7a6e6e;
      border-radius: 3px 0 0 3px;
    }

    .tool-bar .icon, .tool-bar-delegate .icon {
      display: inline-block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-image: url(./img/toolbars.png);
    }

    /* .tool-bar .icon.icon_cart, .tool-bar-delegate .icon.icon_cart {
      background-position: -48px 0;
    }
    .tool-bar .icon.icon_favor, .tool-bar-delegate .icon.icon_favor {
      background-position: -48px -50px;
    }
    .tool-bar .icon.icon_activity, .tool-bar-delegate .icon.icon_activity {
      background-position: -48px -100px;
    }
    .tool-bar .icon.icon_coupon, .tool-bar-delegate .icon.icon_coupon {
      background-position: -48px -150px;
    } */

    .tool-bar .name, .tool-bar-delegate .name {
      position: absolute;
      z-index: -1;
      right: 35px;
      top: 0;

      width: 0;
      height: 35px;
      line-height: 35px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: #7a6e6e;
      cursor: pointer;
      border-radius: 3px 0 0 3px;
      transition: width .2s ease;
    }

    .tool-bar .item:hover, .tool-bar-delegate .item:hover,
    .tool-bar .item:hover .name, .tool-bar-delegate .item:hover .name {
      background-color: #cd1926;
    }
  </style>
</head>
<body>

  <h3>1. 不使用事件委托</h3>
  <div class="tool-bar">
    <div class="item">
      <i class="icon icon_cart"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item">
      <i class="icon icon_favor"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item">
      <i class="icon icon_activity"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item">
      <i class="icon icon_coupon"></i>
      <div class="name">大礼包</div>
    </div>
  </div>

  <h3>2. 使用事件委托</h3>
  <div class="tool-bar-delegate">
    <div class="item">
      <i class="icon icon_cart"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item">
      <i class="icon icon_favor"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item">
      <i class="icon icon_activity"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item">
      <i class="icon icon_coupon"></i>
      <div class="name">大礼包</div>
    </div>
  </div>

  <script>
    const iconAllEl1 = document.querySelectorAll('.tool-bar .icon')
    const iconAllEl2 = document.querySelectorAll('.tool-bar-delegate .icon')
    iconItemHandle(iconAllEl1)
    iconItemHandle(iconAllEl2)
    
    // 方案一
    // 1. 获取元素
    var items = document.querySelectorAll('.tool-bar .item')
    // 2. 遍历
    for (var i = 0; i < items.length; i++) {
      // var name = null
      // 3. 给每个item添加鼠标移入事件
      items[i].onmouseover = function () {
        // 4. 获取当前item的name元素
        var name = this.children[1]
        // 5. 修改name的宽度
        name.style.width = '66px'
        // 6. 让name在鼠标移入时不消失
      }
      // 7. 给每个item添加鼠标移出事件
      items[i].onmouseout = function () {
        // 4. 获取当前item的name元素
        var name = this.querySelector('.name')
        // 5. 修改name的宽度
        name.style.width = '0'
      }
    }

    // 方案二: 事件委托
    const toolBarDelegate = document.querySelector('.tool-bar-delegate')

    toolBarDelegate.onmouseover = function (e) {
      handlMouseEvent(e, 66)
    }

    toolBarDelegate.onmouseout = function (e) {
      handlMouseEvent(e, 0)
    }

    function handlMouseEvent(event, width) {
      // 1. 获取当前鼠标移入的元素
      const target = event.target.parentElement
      
      // 2. 判断当前鼠标移入的元素是否为item
      if (target.classList.contains('item')) {
        // 3. 获取当前item的name元素
        const name = target.querySelector('.name')
        // 4. 修改name的宽度
        name.style.width = `${width}px`
      }
    }

    function iconItemHandle(domList) {
      for (let i = 0; i < domList.length; i++) {
        domList[i].style.backgroundPosition = `-48px -${i * 50}px`
      }
    }
    
  </script>
  
</body>
</html>